<template>
  <div class="ListPage" v-element-resize="{func:countListHeight,immediate: true}" ref="ListPageRef">
    <div ref="searchRef" v-element-resize="{func:countListHeight,immediate: true}">
      <slot name="search" v-bind="{getList,resetGetList}"></slot>
    </div>
    <div :style="{height: listHeight+'px'}">
      <slot name="list" v-bind="{listData,listHeight,loading}"></slot>
    </div>
    <div ref="paginationRef" class="pagination">
      <div :class="{paginationslot100}">
        <slot
          name="pagination"
          v-bind="{total,queryParams,getList}"
        ></slot>
      </div>
      <Pagination
        v-if="showPagination"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {PropType} from "vue";
import {SearchListFunc, SearchListParams} from "./type";
import {ElementResize} from "../../directive/elementResize";
import Pagination from '../Pagination/index.vue'

export default defineComponent({
  name: "ListPage",
  directives:{
    ElementResize
  },
  components: {
    Pagination
  },
  props:{
    /**
     * 远程搜索方法
     */
    searchList: {
      type: Function as PropType<SearchListFunc>,
      default:(search:SearchListParams)=>Promise.resolve({
        list: [],
        total: 0,
      })
    },
    /**
     * 控制第一个是否执行searchList
     */
    firstLoad: {
      type: Boolean,
      default: true,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    paginationslot100: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listData: [],
      listHeight: 0,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      elListen: null
    }
  },
  created() {
    if(this.firstLoad){
      this.getList()
    }
  },
  methods:{
    countListHeight() {
      this.$nextTick(()=>{
        const clientHeight = this.$refs.ListPageRef.clientHeight;
        const paginationRef = this.$refs.paginationRef.clientHeight;
        const searchRef = this.$refs.searchRef.clientHeight;
        this.listHeight=clientHeight - paginationRef - searchRef
      })
    },
    getList() {
      this.loading=true
      this.searchList(this.queryParams)
        .then((res) => {
          if(res) {
            this.listData=res.list || []
            this.total=res.total || 0
          }
        })
        .catch(err => console.error(err))
        .finally(() => {
          this.loading = false
        })
    },
    resetGetList(){
      this.queryParams.pageNum=1
      this.getList()
    }
  }
})
</script>

<style scoped lang="scss">
.ListPage{
  height: 100%;
  .pagination{
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden; /* 避免父元素塌陷 */
    .paginationslot100{
      width: 100%;
    }
  }
}
</style>
